<template>
  <div class="model-page">
    <div class="model" :style="style">
      <div class="header">
        <div class="tabs"><span>日程</span></div>
        <div class="cancel" @click="cancel">
          <a-icon type="close"/>
        </div>
      </div>
      <div class="body">
        <div>
          <div :key="index" v-if="group===index" v-for="(item,index) in groupType">
            <span :class="groupTypeColor[index]">■</span> {{item}}
          </div>
<!--          <div v-if="group===1"><span style="color:#319D0A">■</span> 集体</div>-->
          <div class="margin-tb-10 content">
            <span>{{content}}</span>
          </div>

        </div>
        <div class="margin-tb-10">
          <a-icon type="clock-circle"/>
          <span class="margin-left-10 font-weight">{{date}}({{weekDay}})</span>
          <span v-if="!isAllDay">
              <span class="font-weight margin-left-10"> {{beginDateTime}}</span>
              <span class="font-weight">-</span>
              <span class="font-weight">{{endDateTime}}</span>

              <span class="time-equation">{{timeEquation}} 小时</span>
          </span>
          <span v-if="isAllDay" class="time-equation">全天</span>

          <!--<a-checkbox @change="onChangeAllDay">
            全天
          </a-checkbox>-->

        </div>

      </div>
      <div class="footer">
        <a-button type="primary" @click="cancel">确定</a-button>
      </div>

    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  import { getWeekDay,timeEquation } from "../utils/utils"
  export default {
    name: "ModelSchedule",
    props:{
      x:Number,
      y:Number,
      day:Number,
      contents:String,
      groups:Number,
      beginTime:String,
      endTime:String,

    },
    data(){
      return{
        style:{},
        content:this.contents,
        group:this.groups,
        groupType:'工作,休息,个人,加班,家庭'.split(","),
        groupTypeColor:'blue,grayGreen,orange,red,purple'.split(','),
        date:moment(new Date(this.beginTime).setDate(this.day)).format('MM月DD日'),
        beginDateTime:moment(this.beginTime).format('HH:mm'),
        endDateTime:moment(this.endTime).format('HH:mm'),
        isAllDay:false,
        weekDay:"",
        timeEquation:timeEquation(moment(this.beginTime).format('HH:mm'),moment(this.endTime).format('HH:mm')),

      }
    },
    created() {
      this.setPosition()
    },
    watch:{
      x(newVal,old){
        this.setPosition()
      },
    },
    methods:{
      moment,
      onChangeAllDay(e){
        this.isAllDay = e.target.checked;
        if(this.isAllDay){
          this.beginDateTime = "00:00";
          this.endDateTime = "23:59";
        }else{
          this.beginDateTime = '00:00';
          this.endDateTime = moment(new Date()).format('HH:mm');
        }
      },
      cancel(){
        this.$emit("cancel")
      },

      setPosition(){
        this.date = moment(new Date(this.beginTime).setDate(this.day)).format('MM月DD日');
        this.weekDay = getWeekDay(moment(new Date(this.beginTime).setDate(this.day)).format('YYYY/MM/DD'))
        if(this.beginDateTime=='00:00'&&this.endDateTime=='00:00'){
          // 判断是不是全天
          this.isAllDay = true;
        }
        this.style={
          position: "absolute",
          top: this.y+'px',
          left: this.x+'px'
        }

      },
    }
  }
</script>

<style scoped lang="less">
  @import "scrollbar";
  .model-page{
    position: absolute;
    top:0;
    width: 100%;
    height: 100vh;
  }
  .model{
    position: absolute;
    background-color: #fff;
    width: 420px;
    height: auto;
    box-shadow: 0 10px 30px 0 var(--KWebDialog-color-shadow,rgba(0,0,0,.2))!important;
    border-radius: var(--KWebDialog-hint-borderRadius,4px)!important;
    padding: 20px;
    .header{
      width: 380px;
      display: flex;
      .tabs{
        width: 300px;
        span{
          font-size: 18px;
          color:#000;
        }
      }
      .cancel{
        width: 80px;
        text-align: right;
        cursor: pointer;
      }
    }
    .body{
      padding: 10px 0;
      .content{
        padding: 0px 15px;
        font-size: 16px;
        max-height: 130px;
        overflow: auto;
        span{

        }
      }
      .time-equation{
        padding-left: 20px;
        color:#aaa;
      }
    }
    .footer{
      text-align: right;
    }

  }
  .blue{ // 工作
    color: #4FACF1;
  }
  .grayGreen{ // 休息
    color: #6BD35F;
  }
  .orange{ // 个人
    color: #F9D850;
  }
  .red{ // 加班
    color: #EB436A;
  }
  .purple{ // 家庭
    color: #F9D64A;
  }
  .margin-left-10{
    margin-left: 10px;
  }
  .margin-tb-10{
    margin: 10px 0;
  }
  .font-weight{
    font-weight:700;
  }
  .text-align-right{
    text-align: right;
  }
</style>
<style>
  .unset-border .ant-time-picker-input{
    border:0px;
  }
</style>